<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:include="public/page_css::page_css ('修改客户档案')" >
    <meta charset="UTF-8"/>
    <title>Title</title>
    <!-- load css -->

    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/font/iconfont.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/js/layui/css/layui.css}"  media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"  media="all"/>
    <style>

    </style>
</head>

<body>
<div class="layui-fluid larry-wrapper">
    <div class="layui-row layui-col-space30">
        <div class="layui-col-xs24">
            <section class="panel panel-padding">
                <form id="form1" class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="khbh" required="required" jq-verify="required" jq-error="请输入客户编号" lay-verify="required" placeholder="请输入客户编号" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="khmc" required="required" jq-verify="required" jq-error="请输入客户名称" lay-verify="required" placeholder="请输入客户名称" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户类型</label>
                        <div class="layui-input-block">
                            <select name="khlx">
                                <option value="0">收货人</option>
                            </select>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>省份</label>
                        <div class="layui-input-block">

                            <select name="sheng" id="sheng" lay-verify="required"  lay-filter="sheng" lay-search>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px" >*</font>城市</label>
                        <div class="layui-input-block">
                            <select  id="shi" name="shi"  lay-verify="required" lay-search  >
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>路线</label>
                        <div class="layui-input-inline">

                            <select lay-ignore="lay-ignore"  name="selectId" id="selectId" select2  style="width: 193px"></select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>详细地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="dz" required="required" jq-verify="required" jq-error="请输入详细地址"  lay-verify="required" placeholder="请输入详细地址" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>联系人姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="lxrxm" required="required" jq-verify="required" jq-error="请输入联系人姓名" lay-verify="required" placeholder="请输入联系人姓名" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>联系电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="lxrdh" required="required" jq-verify="required" jq-error="请输入联系人电话" lay-verify="required" placeholder="请输入联系人电话" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red" style="margin-right:10px">*</font>客户等级</label>
                        <div class="layui-input-block">
                            <input type="text" name="khdj" required="required" jq-verify="required" jq-error="请输入客户等级" lay-verify="required|phone" placeholder="客户等级" autocomplete="off" class="layui-input "/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" jq-filter="submit" lay-submit="" lay-filter="editCustomer">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                    <input type="hidden" th:value="${id}" id="id" name="id">
                </form>
            </section>
        </div>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>

<script>
    $(function () {
        var str = "<option>==请选择===</option>";
        $.ajax({
            type: "GET",
            url: "/zxbzwms/wmscityinfo/selectProvice/1",
            dataType: "JSON",
            async: false,
            success: function (data) {
                console.info(data);
                //从服务器获取数据进行绑定
                $.each(data, function (i, item) {
                    console.info("item.cityname"+item.cityname);
                    console.info(item.citycode);
                    str += "<option value=" + item.cityname + " code="+item.citycode+">" + item.cityname + "</option>";
                })
                //将数据添加到省份这个下拉框里面
                $("#sheng").append(str);

            },
            error: function () { alert("Error"); }
        });
        //加载城市
    });

    layui.use(['form','zzpUtils'], function(){
        var form = layui.form,
            zzpUtils = layui.zzpUtils;
        zzpUtils.select2({
            elem:"#selectId",  //dom
            url:"/wmsCustomerFiles/baseSelectLine" //路径
        });
        zzpUtils.select({
            elem:"#sheng",
            url:"/wmscityinfo/selectProvice/1"
        });
        zzpUtils.action({
            url:"/wmsCustomerFiles/findOne",
            data: JSON.stringify({id:$("#id").val()}),
            success:function (data) {
                console.info(data);
                $("#sheng").append(  "<option value=" + data.sheng + ">" + data.sheng + "</option>");
                $("#shi").append(  "<option value=" + data.shi + ">" + data.shi + "</option>");
                zzpUtils.loadJsonDataToForm(data);
            },error: function (xhr, textStatus) {
                console.log(textStatus);
                console.log(xhr)
            }
        });

        form.on("submit(editCustomer)",function(data){
            console.log(zzpUtils.getFormJson($("#form1")));
            zzpUtils.confirm("是否确定修改",function(index){
                zzpUtils.action({
                    url:"/wmsCustomerFiles/edit",
                    data:JSON.stringify(data.field),
                    success:function (data) {
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            top.layer.msg(data.title+","+data.message);
                            //刷新父页面

                        },500);
                    },error: function (xhr, textStatus) {
                        console.log(textStatus);
                        console.log(xhr)
                    }
                })
            })
            return false;

        });

        form.on('select(sheng)', function(data){
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            var sheng = $("#sheng").find("option:selected").attr("code");
            //判断省份这个下拉框选中的值是否为空
            if (sheng == "") {
                return;
            }
            $("#shi").html("");
            var str = "<option>==请选择===</option>";
            $.ajax({
                type: "GET",
                url: "/zxbzwms/wmscityinfo/selectProvice/"+sheng,
                dataType: "JSON",
                async: false,
                success: function (data) {
                    //从服务器获取数据进行绑定
                    $.each(data, function (i, item) {
                        str += "<option value=" + item.cityname + ">" + item.cityname + "</option>";
                    })
                    console.info(str);
                    //将数据添加到省份这个下拉框里面
                    $("#shi").append(str);
                    console.info( $("#shi").html());
                    form.render('select');
                },
                error: function () { alert("Error"); }
            });

        });

        //各种基于事件的操作，下面会有进一步介绍
    });
</script>
</html>